﻿<template>
    <vxe-modal v-model="showSelectUser" :title="title" width="1100" resize destroy-on-close :show-close="true">
    <!--<el-dialog :visible.sync="showSelectUser" :title="title" :width="dialogWidth">-->

        <div slot="title" class="elDialogTitle">
            {{ title }}
            <el-radio-group v-model="type" size="mini" @change="show">
                <el-radio-button :label="0">显示组织结构</el-radio-button>
                <el-radio-button :label="1">不显示组织结构</el-radio-button>
            </el-radio-group>
        </div>
        <div style="width: 100%;">
            <el-row :gutter="20">
                <el-col :span="type === 0 ? 8 : 0">
                    <el-card class="box-card enclosureFirstCard">
                        <div v-loading="treeLoading" element-loading-background="rgba(0, 0, 0, 0)" class="elscrollbar_gg" :style="{'height': (cardBodyH - 55) + 'px'}">
                            <el-scrollbar style="height:100%">
                                <organizationtree :data="organizationUnits"
                                                  nodekey="treeID"
                                                  show-label-name="deptName"
                                                  show-desc="profName"
                                                  :expand-all="true"
                                                  :show-menu="false"
                                                  :expand-on-click-node="false"
                                                  @node-click="handleNodeClick" />
                            </el-scrollbar>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="type === 0 ? 16 : 24">
                    <el-card class="box-card">
                        <div :style="{'min-height': (cardBodyH - 55) + 'px'}">
                            <el-input v-model="userNameFilter" size="small" placeholder="请输入姓名、用户名或工号查询" clearable style="margin-bottom: 10px;" @change="getUser()" />
                            <vxe-grid ref="xGrid"
                                      :loading="loading"
                                      resizable
                                      border
                                      show-overflow
                                      highlight-hover-row
                                      :height="cardBodyH - 55 - 46"
                                      align="center"
                                       :seq-config="{startIndex: (tablePageUser.currentPage - 1) * tablePageUser.pageSize}"
                                      :columns="tableColumnUser"
                                      :data="users"
                                      :pager-config="tablePageUser"
                                      @radio-change="radioChange"
                                      @checkbox-change="checkboxChange"
                                      @checkbox-all="checkboxAll">
                                <template v-slot:reverse>
                                    <div class="vxePageLeft">
                                        <el-link type="primary" :underline="false" class="elLinkBTN" @click="fx">反选</el-link>
                                    </div>
                                </template>
                                <template v-slot:current_pageNum>
                                    <span class="vxe-pager--total">当前页 {{ users.length }} 条</span>
                                </template>
                            </vxe-grid>
                            <!--:seq-config="{startIndex: (tablePageUser.currentPage - 1) * tablePageUser.pageSize}"
                        :pager-config="tablePageUser"
                        @page-change="handlePageChangeUser"-->
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="modal_footer">
            <!-- <vxe-button content="关闭" size="small" @click="close" /> -->
            <vxe-button status="primary" content="确定" size="small" @click="save" />
        </div>
    <!--</el-dialog>-->
    </vxe-modal>
</template>
<script>
    import organizationtree from '../OrganizationTree/index.vue';
    import DeptAPI from '../../request/Security/DeptAPI.js';
    export default {
        components: { organizationtree },
        props: {
            multiple: { type: Boolean, default: false },
            title: { type: String, default: '选择人员' }
        },
        data() {
            return {
                dialogWidth: '1100px',
                cardBodyH: window.innerHeight - 434,

                showSelectUser: false,

                treeLoading: false,
                organizationUnits: [],
                type:0,
                userNameFilter: '',
                loading: false,
                tableColumnUser: [
                    { type: this.multiple ? 'checkbox' : 'radio', title: '选择', width: 80 },
                    { field: 'userName', title: '用户名' },
                    { field: 'realName', title: '姓名' },
                    { field: 'userCode', title: '工号' },
                    { field: 'mobile', title: '手机号' }
                ],
                tablePageUser: {
                     total: 0,
                     currentPage: 1,
                     pageSize: 50,
                     align: 'right',
                     pageSizes: [50, 80],
                     layouts: ['Sizes', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
                    perfect: true,
                    slots: {
                        left: 'reverse',
                        right: 'current_pageNum'
                    }
                },
                users: [],

                selectOrg: {},
                selectUsers: [],
            };
        },
        computed: {},
        mounted() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    _this.cardBodyH = window.innerHeight - 434;
                    _this.setWidth();
                })();
            };
        },

        methods: {
            show() {
                this.setWidth();
                this.tablePageUser.currentPage = 1;
                this.tablePageUser.pageSize = 20;
                this.tablePageUser.total = 0;
                this.users = [];
                this.selectOrg = {};
                this.selectUser = {};
                this.userNameFilter = '';
                if (this.type === 0) {
                    this.getOrgData();
                } else {
                    this.getUser(0);
                };
                this.showSelectUser = true;
            },
            getOrgData() { // 获取部门
                this.organizationUnits = [];
                this.treeLoading = true;
                DeptAPI.getAll().then(res => {
                    this.organizationUnits = res;
                    this.treeLoading = false;
                }).catch(err => {
                    this.treeLoading = false;
                });
            },
            handleNodeClick(data) { // 选中部门
                this.selectOrg = data;
                this.getUser(0);
            },
            getUser(type) { // 获取部门人员
                //if (!this.selectOrg.treeID) {
                //    this.$message({ type: 'warning', message: '请选择部门' });
                //    return;
                //};
                if (type === 0) {
                    this.tablePageUser.currentPage = 1;
                };
                this.loading = true;
                //var DTID = this.selectOrg.parentid === 0 ? '' : this.selectOrg.id;
                //var params = { pageNum: this.tablePageUser.currentPage - 1, pageSize: this.tablePageUser.pageSize, DTID: DTID, userName: this.userNameFilter };
                var params = {
                    DeptID: this.type === 0? this.selectOrg.treeID:'',
                    userName: this.userNameFilter
                };
                DeptAPI.getDeptUser(params).then(res => {
                    this.users = res;
                    this.tablePageUser.total = res.length;
                    this.loading = false;
                    this.$nextTick(() => {
                        if (this.multiple) {
                            var arr = res.filter(e => this.selectUsers.findIndex(ee => ee.userID === e.userID) > -1);
                            this.$refs.xGrid.setCheckboxRow(arr, true);
                        } else {
                            if (this.selectUsers && this.selectUsers.userID) {
                                var i = res.findIndex(e => e.userID === this.selectUsers.userID);
                                if (i > -1) {
                                    this.$refs.xGrid.setRadioRow(res[i]);
                                };
                            };
                        };
                    });
                }).catch(() => {
                    this.loading = false;
                });
            },
            handlePageChangeUser({ currentPage, pageSize }) {
                this.tablePageUser.currentPage = currentPage;
                this.tablePageUser.pageSize = pageSize;
                this.getUser();
            },

            radioChange() {
                this.selectUsers = this.$refs.xGrid.getRadioRecord();
            },
            checkboxChange({ checked, row }) {
                var has = this.selectUsers.findIndex(e => e.userID === row.userID);
                if (checked && has === -1) {
                    this.selectUsers.push(row);
                } else if (!checked && has > -1) {
                    this.selectUsers.splice(has, 1);
                    console.log(this.selectUsers)
                };
            },
            checkboxAll({ checked }) {
                if (checked === true) {
                    var arr = this.$refs.xGrid.getCheckboxRecords(true);
                    arr.forEach((item, i) => {
                        var has = this.selectUsers.findIndex(e => e.userID === item.userID);
                        if (has === -1) {
                            this.selectUsers.push(item);
                        };
                    });
                } else {
                    this.users.forEach((item, i) => {
                        var has = this.selectUsers.findIndex(e => e.userID === item.userID);
                        if (has > -1) {
                            this.selectUsers.splice(has, 1);
                        };
                    });
                }
            },
            fx() {
                var t = [];
                var f = [];
                this.users.filter(item => {
                    var has = this.selectUsers.findIndex(e => e.userID === item.userID);
                    if (has === -1) {
                        t.push(item);
                        this.selectUsers.push(item);
                    } else {
                        f.push(item);
                        this.selectUsers.splice(has, 1);
                    }
                });
                this.$refs.xGrid.setCheckboxRow(t, true);
                this.$refs.xGrid.setCheckboxRow(f, false);
            },

            save() {
                this.$emit('selected', this.selectUsers);
                this.showSelectUser = false;
            },

            setWidth() {
                this.dialogWidth = window.innerWidth < 1100 ? (window.innerWidth - 30) + 'px' : '1100px';
            }
        },
        template: `#template`
    };
</script>
<style>
</style>
